<template>
  <n-space vertical>
    <n-space justify="space-between">
      <n-button @click="addHistory"> 新建记录 </n-button>
    </n-space>
    <n-data-table :columns="columns" :data="data" :bordered="false" />
  </n-space>
  <Dialog :title="editData ? '编辑记录' : '新增记录'" v-model:show="dialogShow">
    <n-form
      ref="formRef"
      :label-width="80"
      label-align="left"
      :model="formValue"
      label-placement="left"
      :rules="rules"
    >
      <n-form-item label="标题" path="desc">
        <n-date-picker v-model:value="formValue.date" type="date" />
      </n-form-item>
      <n-form-item label="标题" path="desc">
        <n-dynamic-input show-sort-button v-model:value="formValue.desc" />
      </n-form-item>
      <n-form-item>
        <n-button @click="clickHistory"> 保存 </n-button>
      </n-form-item>
    </n-form>
  </Dialog>
</template>

<script setup lang="ts">
import {
  NForm,
  NFormItem,
  NDynamicInput,
  NButton,
  NSpace,
  NDataTable,
  NDatePicker,
  type DataTableColumns,
} from "naive-ui";
import {
  type History,
  type createHistory,
  create as apiHistoryCreate,
  update as apiHistoryUpdate,
  findAll as apiHistoryFindAll,
  deleteHistory as apiHistoryDelete,
} from "~/api/history";
useHead({
  title: "建站日志", //网站标题
});

definePageMeta({
  title: "建站日志",
});
const formValue = ref<createHistory>({
  date: new Date().getTime(),
  desc: [],
});
const rules = {
  title: {
    pattern: /^.{0,10}$/,
    message: "查询长度小于10",
    trigger: "input",
  },
};
const dialogShow = ref(false);
const editData = ref("");
const data = ref<History[]>([]);
const dayjs = useDayjs();
const createColumns = ({
  edit,
  del,
}: {
  edit: (row: History) => void;
  del: (row: History) => void;
}): DataTableColumns<History> => {
  return [
    {
      title: "日期",
      key: "date",
      render(row: History) {
        return dayjs(row.date).format("YYYY年MM月DD日");
      },
    },
    {
      title: "事件",
      key: "desc",
      render(row: History) {
        const descArray = row.desc.map((text) => {
          return h("pre", null, { default: () => text });
        });
        return descArray;
      },
    },
    {
      title: "操作",
      key: "actions",
      render(row: History) {
        return [
          h(
            NButton,
            {
              strong: true,
              tertiary: true,
              size: "small",
              style: {
                "margin-right": "10px",
              },
              onClick: () => del(row),
            },
            { default: () => "删除" }
          ),
          h(
            NButton,
            {
              strong: true,
              tertiary: true,
              size: "small",
              style: {
                "margin-right": "10px",
              },
              onClick: () => edit(row),
            },
            { default: () => "编辑" }
          ),
        ];
      },
    },
  ];
};
const columns = createColumns({
  edit(row: History) {
    editData.value = row.id;
    formValue.value.date = row.date * 1;
    formValue.value.desc = row.desc;
    dialogShow.value = true;
  },
  async del(row: History) {
    await apiHistoryDelete(row.id);
    getAllHistory();
  },
});
const addHistory = () => {
  formValue.value.date = new Date().getTime();
  formValue.value.desc = [];
  dialogShow.value = true;
};
const clickHistory = async () => {
  if (editData.value) {
    const res = await apiHistoryUpdate(editData.value, {
      ...formValue.value,
    });
    if (res.code === 0) {
      formValue.value = {
        date: new Date().getTime(),
        desc: [],
      };
      editData.value = "";
      dialogShow.value = false;
      getAllHistory();
    }
  } else {
    const res = await apiHistoryCreate({
      ...formValue.value,
    });
    if (res.code === 0) {
      formValue.value = {
        date: new Date().getTime(),
        desc: [],
      };
      dialogShow.value = false;
      getAllHistory();
    }
  }
};

const getAllHistory = async () => {
  
  const res = await apiHistoryFindAll();
  if (res.data) {
    data.value = res.data;
  }
};

onMounted(() => {
  getAllHistory();
});
</script>
<style scoped></style>
